<template>
    <div>
        <!-- 视频教程 -->
        <div class="persondetail">
            <!-- 头部 -->
            <div class="shopcartTitle">
                <div class="GoOut" @click="GoOut">&lt;</div>
                <div class="GoOutHome" @click="GoOutHome">
                    <img src="../../assets/首页111 .png" alt="">
                </div>
                <div class="GoOutName">视频教程</div>
            </div>
            <!-- 选项卡 -->
            <div class="personBox">
                <div class="tabs-container">
                    <div class="tabs-header">
                        <div class="tabs-text" v-for="(tab, index) in swiperTabList" :key="index"
                            :class="['tab-item', { active: swiperTabIdx === index }]" @click="changeTab(index)">
                            {{ tab }}
                        </div>
                    </div>

                    <transition name="fade">
                        <div class="tabs-content" :key="swiperTabIdx">
                            <div class="tabscon-tent">
                                <div class="tabsList" style="list-style: none;">
                                    <div class="listLis">
                                        <img src="https://mloongbld.obs.cn-north-4.myhuaweicloud.com/image/20221110/20221110110755593221.png"
                                            alt="">
                                        <div class="listext">
                                            <div class="texttop">收到主机后如何开箱</div>
                                            <div class="textbot">
                                                <div class="botleft">
                                                    <img src="https://mloongbld.obs.cn-north-4.myhuaweicloud.com/video/20211018/20211018153016815430.webp"
                                                        alt="">
                                                    <div>小名的实验室</div>
                                                </div>
                                                <div class="botright">
                                                    2022.11.12
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </transition>
                </div>
            </div>
        </div>
    </div>
</template>
<!-- 11 -->
<script>
export default {
    data() {
        return {
            swiperTabList: ["主机开箱", "硬件安装及拆卸", "系统安装"],
            swiperTabIdx: 0,
            swiperColor: '#161616',
            swiperCurrentColor: '#1D63FF',
        };
    },
    methods: {
        changeTab(index) {
            this.swiperTabIdx = index;
        },

        GoOut() {
            this.$router.push("/explore").catch((err) => err)
        },
        GoOutHome() {
            this.$router.push('/home').catch((err) => err)
        }
    }
};
</script>

<style lang="scss" scoped>
.persondetail {
    background: #eee;

    // 头部
    .shopcartTitle {
        height: 0.6rem;
        background: #fff;
        display: flex;

        .GoOut {
            width: 0.4rem;
            height: 0.4rem;
            border-right: 0.01rem solid #ccc;
            margin: 0 0.2rem;
            font-size: 0.4rem;
            line-height: 0.4rem;
        }

        .GoOutHome {
            img {
                width: 0.4rem;
                height: 0.4rem;
            }
        }

        .GoOutName {
            margin-left: 2rem;
            font-size: 0.3rem;
        }
    }

    // 选项卡
    .personBox {
        .tabs-header {
            display: flex;
            overflow-x: auto;
            background: #fff;
        }

        .tab-item {
            flex-shrink: 0;
            padding: 10px 20px;
            color: #999;
            cursor: pointer;
        }

        .tab-item.active {
            color: #333;
            border-bottom: 0.06rem solid #333;
        }

        .tabs-content {


            .tabscon-tent {
                width: 100%;
                height: 100%;
                margin-top: 0.2rem;

                .tabsList {

                    .listLis {
                        width: 100%;
                        height: 1.8rem;
                        display: flex;
                        border-bottom: 0.01rem solid #999;

                        img {
                            width: 2.3rem;
                            margin: 0.2rem;
                        }

                        .listext {
                            margin-top: 0.2rem;

                            .texttop {
                                font-size: 0.32rem;
                            }

                            .textbot {
                                width: 100%;
                                display: flex;
                                margin-top: 0.4rem;
                                justify-content: space-between;

                                .botleft {
                                    display: flex;

                                    img {
                                        width: 0.3rem;
                                        height: 0.3rem;
                                        border-radius: 50%;
                                    }

                                    div {
                                        margin-top: 0.16rem;
                                        font-size: 0.2rem;
                                        color: #999;
                                    }
                                }

                                .botright {
                                    margin-left: 0.8rem;
                                    margin-top: 0.16rem;
                                    font-size: 0.2rem;
                                    color: #999;
                                }
                            }
                        }
                    }
                }
            }
        }

        .fade-enter-active,
        .fade-leave-active {
            transition: opacity 0.5s;
        }

        .fade-enter,
        .fade-leave-to {
            opacity: 0;
        }

        .tabs-text {
            margin-left: 0.05rem;
            font-weight: bold;
            font-size: 0.3rem;
        }
    }
}
</style>